{#@Time:2021/01/01 15:25#}
{#@Author:简简#}
{#@File：navigation.html#}
{#@software:PyCharm#}
{% extends 'layout/base.html' %}
{% load static %}
{% block css %}
    <link rel="stylesheet" href="{% static 'plugins/navigation/css/xenon-core.css' %}">
    <link rel="stylesheet" href="{% static 'plugins/navigation/css/xenon-components.css' %}">
    <link rel="stylesheet" href="{% static 'plugins/navigation/css/nav.css' %}">
    <!-- 粒子效果 -->
    <style type="text/css">
        #particles-js {
            position: fixed;
            top: 0px;
            left: 0px;
            right: 0px;
            bottom: 0px;
            z-index: -1;
        }
         /* 左侧导航栏点击后变为蓝色*/
        .sidebar-menu .main-menu li.active>a {
            color: #B4D9FB;
        }
    </style>
    <!-- 修复导航栏 -->
    <style>
        h2{
            font-weight: 500;
        }
        nav.navbar .navbar-header .navbar-brand {
        padding-left: 0px;
        padding-right: 0px;
        }
    </style>
    <!--大屏幕下隐藏移动端菜单展开图标-->
    <style>
	/*默认:大于等于980px*/
	@media (min-width: 980px){
		.hidden{
            display: none;
		}
	}
    </style>
    <!--小屏幕下隐藏pc端菜单展开图标-->
    <style>
    	/* 平板电脑和小屏电脑之间的分辨率 */
	@media (min-width: 768px) and (max-width: 979px) {
		.hidden2{
			display: none;
		}
	}

	/* 横向放置的手机和竖向放置的平板之间的分辨率 */
	@media (max-width: 767px) {
		.hidden2{
			display: none;
		}
	}

	/* 横向放置的手机及分辨率更小的设备 */
	@media (max-width: 480px) {
		.hidden2{
			display: none;
		}
	}

</style>
{% endblock %}
{% block contents %}
    <div class="page-container" >
        <!-- 左侧导航栏 -->
        <div class="sidebar-menu toggle-others " style="background-color:rgba(0,0,0,0);">
            <div class="sidebar-menu-inner sticky-top">
                <!--pc端左侧导航栏-->
                <div class="card" >
                  <div class="card-body">
                      <!-- 卡片边缘缎带 -->
                      <div class="ribbon ribbon-top ribbon-left bg-azure">
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
                      </div>
                        <!--目录展开图标-->
                        <div class="float-right">
                            <!--小屏幕下菜单展开图标-->
                            <a href="#" class="hidden" data-toggle="mobile-menu">
                                <span class="navbar-toggler-icon"></span>
                            </a>
                            <!--大屏幕下菜单展开图标-->
                            <a href="#" class="hidden2" data-toggle="sidebar">
                                <span class="navbar-toggler-icon"></span>
                            </a>
                        </div>
                        <ul id="main-menu" class="main-menu">
                        {% for category in category_nav %}
                            <li>
                                <a href="#{{category.name}}" class="smooth">
                                    <i class="{{category.icon }}" style="zoom: 1.5;" ></i>
                                    <span class="title" style="zoom: 1.5;" >{{ category.name }}</span>
                                </a>
                            </li>
                        {% endfor %}
                        <li>
                            <a href="#数据统计" class="smooth">
                                <i class="fas fa-chart-line" style="zoom: 1.5;" ></i>
                                <span class="title" style="zoom: 1.5;" >数据统计</span>
                            </a>
                        </li>
                    </ul>
                  </div>
                </div>
            </div>
        </div>
        <!-- 右侧条目 -->
        <div class="main-content">
            <!-- 右侧条目 -->
            {% for category in category_nav %}
                <h4 class="text-gray" ><i class="{{ category.icon }}" style="margin-right: 7px;" id="{{category.name}}"></i>{{category.name}}</h4>
                <div class="row" >
                    {% for item in items %}
                        {% if category.name == item.category.name %}
                            <div class="col-sm-4 col-md-6 col-lg-4">
                                <div class="xe-widget xe-conversations box2 label-info" onclick="window.open('{{  item.url  }}', '_blank')" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="{{ item.url }}" >
                                    <div class="xe-comment-entry">
                                        <a class="xe-user-img inverted">
                                            <img data-src="{{item.img}}" class="lozad img-circle" width="{{ item.img_width }}">
                                        </a>
                                        <div class="xe-comment">
                                            <a href="#" class="xe-user-name overflowClip_1">
                                                <strong>{{ item.title }}</strong>
                                            </a>
                                            <p class="overflowClip_2">{{item.desc}}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        {% endif %}
                    {% endfor %}
                </div>
                <br/>
            {% endfor %}
            <!-- 数据分析 -->
           <h4 class="text-gray" style="text-align: center;font-size: 20px"><i class="fas fa-chart-line" style="margin-right: 7px;" id="数据统计"></i>数据统计</h4>
            <div class="row row-cards">
                <div class="col-md-6 col-xl-6">
                    <div class="card">
                      <div class="card-body">
                        <div id="item_num1" style="height:450px;"></div>
                      </div>
                    </div>
                    </div>
                <div class="col-md-6 col-xl-6">
                    <div class="card">
                      <div class="card-body">
                       <div id="item_num2" style="height:450px;"></div>
                      </div>
                    </div>
                    </div>
            </div>
        </div>
    </div>
    <div id="particles-js"></div>
{% endblock %}
{% block js %}
    <script src="{% static 'plugins/navigation/js/jquery-1.11.1.min.js' %}"></script>
    <!-- 粒子背景 -->
    <script type="text/javascript" src="{% static 'plugins/particles/particles.js' %}"></script>
    <script type="text/javascript" src="{% static 'plugins/particles/app.js' %}"></script>
    <!-- 锚点平滑移动 -->
    <script type="text/javascript">
    $(document).ready(function() {
         //img lazy loaded
         const observer = lozad();
         observer.observe();

        $(document).on('click', '.has-sub', function(){
            var _this = $(this)
            if(!$(this).hasClass('expanded')) {
               setTimeout(function(){
                    _this.find('ul').attr("style","")
               }, 300);

            } else {
                $('.has-sub ul').each(function(id,ele){
                    var _that = $(this)
                    if(_this.find('ul')[0] != ele) {
                        setTimeout(function(){
                            _that.attr("style","")
                        }, 300);
                    }
                })
            }
        })
        $('.user-info-menu .hidden-sm').click(function(){
            if($('.sidebar-menu').hasClass('collapsed')) {
                $('.has-sub.expanded > ul').attr("style","")
            } else {
                $('.has-sub.expanded > ul').show()
            }
        })
        $("#main-menu li ul li").click(function() {
            $(this).siblings('li').removeClass('active'); // 删除其他兄弟元素的样式
            $(this).addClass('active'); // 添加当前元素的样式
        });
        $("a.smooth").click(function(ev) {
            ev.preventDefault();

            public_vars.$mainMenu.add(public_vars.$sidebarProfile).toggleClass('mobile-is-visible');
            ps_destroy();
            $("html, body").animate({
                scrollTop: $($(this).attr("href")).offset().top - 30
            }, {
                duration: 100,
                easing: "swing"
            });
        });
        return false;
    });

    var href = "";
    var pos = 0;
    $("a.smooth").click(function(e) {
        $("#main-menu li").each(function() {
            $(this).removeClass("active");
        });
        $(this).parent("li").addClass("active");
        e.preventDefault();
        href = $(this).attr("href");
        pos = $(href).position().top - 30;
    });
    </script>
    <!-- Bottom Scripts -->
    <script src="{% static 'plugins/navigation/js/bootstrap.min.js' %}"></script>
    <script src="{% static 'plugins/navigation/js/xenon-toggles.js' %}"></script>
    <!-- JavaScripts initializations and stuff -->
    <script src="{% static 'plugins/navigation/js/xenon-custom.js' %}"></script>
    <script src="{% static 'plugins/navigation/js/lozad.js' %}"></script>
    <script src="{% static 'js/echarts.min.js' %}"></script>
    <!--  Echarts图表  -->
    <script type="text/javascript">
            // 基于准备好的dom，初始化echarts实例
            var myChart1 = echarts.init(document.getElementById('item_num1'));
            // 指定图表的配置项和数据
            var option1 = {
                title: {
                    text: '条目数量统计',
                    top: -2,
                    x: 'center',
                },
                tooltip: {},
                toolbox: {
                    show: true,
                    right: 50,
                    feature: {
                        dataView: {readOnly: false},//数据视图工具
                        magicType: {type: ['line', 'bar']},//动态类型切换
                        restore: {},      //配置项还原。
                        saveAsImage: {}, //保存为图片
                    }
                },
                xAxis: {
                    data: [{% for category in category_nav %}"{{category.name}}",{% endfor %}]
                },
                yAxis: {},
                series: [{
                    markPoint: {
                        data: [
                            {type: 'max', name: '最大值',itemStyle: {color: ['#3ecf8e']},},
                            {type: 'min', name: '最小值',itemStyle: {color: ['#fa755a']},}
                        ]
                    },
                    markLine: {
                       data: [
                            {type: 'average', name: '平均值',itemStyle: {color: ['#ab47bc']},}
                        ]
                    },
                    color: ['#b4d9fb'],
                    name: '条目个数',
                    type: 'bar',
                    data: [{% for category in category_nav %}{{category.get_items}},{% endfor %}]
                }]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart1.setOption(option1);

            //饼图
            var myChart2 = echarts.init(document.getElementById('item_num2'));
            var option2 = {
                title: {
                    text: '分类统计',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'horizontal',
                    top: 'bottom',
                    padding: 55,
                },
                toolbox: {
                    show: true,
                    right: 50,
                    feature: {
                        dataView: {readOnly: false},
                        saveAsImage: {}, //保存为图片
                    }
                },
                series: [
                    {
                        color: ['#6772e5', '#ff9e0f', '#fa755a', '#3ecf8e', '#82d3f4', '#ab47bc', '#525f7f', '#f51c47', '#26A69A'],
                        name: '分类',
                        type: 'pie',
                        radius: '50%',
                        data: [
                            {% for category in category_nav %}{value: {{ category.get_items }}, name: '{{category.name}}'},{% endfor %}
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            myChart2.setOption(option2);
            //让图表自适应屏幕
            window.addEventListener("resize",function () {
                myChart1.resize();
                myChart2.resize();
            });
</script>
{% endblock %}

